<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态生成表格</title>
		 <style>
		 	* {
		 		margin: 0;
		 		padding: 0;
		 		box-sizing: border-box;
		 	}
		 	 .box {
		 	 	width: 400px;
		 	 	margin: 50px auto;
		 	 }
		 	 .box table {
		 	 	border-spacing: 0;
		 	 	border-collapse: collapse;
		 	 	width: 400px;
		 	 }
		 	 .box table thead {
		 	 	width: 100%;
		 	 }
		 	 .box table thead tr {
		 	 	width: 100%;
		 	 	height: 50px;
		 	 	line-height: 50px;
		 	 	
		 	 	background-color: #ccc;
		 	 }
		 	 .box table thead tr th {
		 	 	font-weight: 400;
		 	 }
		 	 .box table thead tr th:nth-child(1) {
		 	 	width: 100px;
		 	 	height: 50px;
		 	 	line-height: 50px;
		 	 	text-align: center;
		 	 	border: 1px solid #999;
		 	 }
		 	 .box table thead tr th:nth-child(2) {
		 	 	width: 100px;
		 	 	height: 50px;
		 	 	line-height: 50px;
		 	 	text-align: center;
		 	 	border: 1px solid #999;
		 	 }
		 	 .box table thead tr th:nth-child(3) {
		 	 	width: 100px;
		 	 	height: 50px;
		 	 	line-height: 50px;
		 	 	text-align: center;
		 	 	border: 1px solid #999;
		 	 }
		 	 .box table thead tr th:nth-child(4) {
		 	 	width: 100px;
		 	 	height: 50px;
		 	 	line-height: 50px;
		 	 	text-align: center;
		 	 	border: 1px solid #999;
		 	 }
		 	 .box tbody {
		 	 	width: 100%;
		 	 }
		 	 .box tbody tr {
		 	 	width: 100%;
		 	 	height: 50px;
		 	 }
		 	 .box tbody tr td {
		 	 	width: 100px;
		 	 	height: 50px;
		 	 	line-height: 50px;
		 	 	text-align: center;
		 	 	border: 1px solid #999;
		 	 }
		 </style>
	</head>
	<body>
		<div class="box">
			<table>
				<thead>
					<tr>
						<th>姓名</th>
						<th>科目</th>
						<th>成绩</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					
				</tbody>
			</table>
		</div>
		
		<script type="text/javascript">
			var tbodys = document.querySelector('tbody');
			
			//创建数据
			var datas = [
				{
					username:'张三',
					course:'javaScript',
					score:100
				},
				{
					username:'赵六',
					course:'javaScript',
					score:88
				},
				{
					username:'王五',
					course:'javaScript',
					score:88
				},
				{
					username:'李四',
					course:'javaScript',
					score:99
				},
				{
					username:'李四',
					course:'javaScript',
					score:99
				}
			];
			
			//通过遍历list的长度来创建行
			for(var i = 0; i < datas.length; i++) {
				
				//创建tr元素
				var tr = document.createElement('tr');
				//把创建好的 tr 添加到tbody中
				tbodys.appendChild(tr);
				
				//遍历数组中的每一个对象,创建 td 元素
				for(var k in datas[i]) {
					
					//创建td元素
					var td = document.createElement('td');
					//将内容添加到 td 里面
					td.innerHTML = datas[i][k];
					//将 td 追加到 tr 里面
					tr.appendChild(td)
				}
				
				//添加第四列
				var delCol = document.createElement('td');
				//将删除键添加到 第四列中
				delCol.innerHTML = '<a href="javascript:;">删除</a>';
				//将 删除列添加到 tr 中
				tr.appendChild(delCol);
				
				
			}
				//删除节点
				//获取所有的 a 元素对象
				var as = document.querySelectorAll('a');
				console.log(as)
				//遍历 as 伪数组
				for(var j = 0; j < as.length; j++) {
					as[j].onclick = function() {
						//删除当前 a 所在的 tr
						tbodys.removeChild(this.parentNode.parentNode);
					}
				}
		</script>
	</body>
</html>
